<template>
  <a-table :columns="columns" :data-source="data">
    <template #name="{ text }">
      <a>{{ text }}</a>
    </template>
    <template #customTitle>
      <span>
        <smile-outlined />
        名字
      </span>
    </template>
    <template #tags="{ text: tags }">
      <span>
        <a-tag v-for="tag in tags" :key="tag"
          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
    </template>
    <template #action="{ record }">
      <span>
        <a>Invite 一 {{ record.name }}</a>
        <a-divider type="vertical" />
        <a>删除</a>
        <a-divider type="vertical" />
        <a class="ant-dropdown-link">
          更多
          <down-outlined />
        </a>
      </span>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import axios from 'axios';
import { defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';


const columns = [
  {
    dataIndex: 'userName',
    key: 'userName',
    slots: { title: 'customTitle', customRender: 'userName' },
  },
  {
    title: '登录账号',
    dataIndex: 'loginId',
    key: 'loginId',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '手机号',
    key: 'phone',
    dataIndex: 'phone',
    slots: { customRender: 'phone' },
  },
  {
    title: '操作',
    key: 'action',
    slots: { customRender: 'action' },
  },
];

let data: any = ref([]);

// const data = [
//   {
//     key: '1',
//     name: '菜鸟',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//   },
//   {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//   },
//   {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//   },
// ];


const route = useRoute();
// console.log(route.query);
getUserInfo();

function getUserInfo() {
  axios({
    method: 'post',
    url: 'http://localhost:18084/person/getPersonById',
    headers: {
      token: route.query.token
    }
  }).then(res => {
    if (res.data.code === "200") {
      console.log(res.data.data);
      data.value = res.data.data;
    }
  })
};

</script>
